/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <sf-form ref="form"
             class="add-server__form server-config">
        <div class="form__type">
            <div class="form__title">
                <lang>基础信息</lang>
            </div>
            <sf-form-item>
                <sf-fieldlabel>
                    <lang>名称</lang>
                </sf-fieldlabel>
                <sf-textfield
                    ref="fieldName"
                    v-model="submitData.name"
                    :default-width="defaultWidth"
                    :max-length="30"
                    :allow-blank="false"
                    :utf8-length="false"
                    :validator="_nameValidator"
                    :blur-trim="true"
                    :default-disabled="isEdit"
                    :placeholder="_('请输入名称')" />
            </sf-form-item>
            <sf-form-item>
                <sf-fieldlabel>
                    <lang>描述</lang>
                </sf-fieldlabel>
                <sf-textarea
                    v-model="submitData.description"
                    :placeholder="_('最多300字（选填）')"
                    :default-width="defaultWidth"
                    :max-length="300"
                    :utf8-length="false" />
            </sf-form-item>
        </div>
        <div class="form__type">
            <div class="form__title">
                <lang>服务镜像配置</lang>
                <sf-fieldtip>
                    <lang>包含基线工具以及机器学习框架的初始启动镜像</lang>
                </sf-fieldtip>
            </div>
            <select-image-form
                ref="defaultImage"
                :width="defaultWidth"
                image-type="public_notebook" />
        </div>
        <div class="form__type">
            <div class="form__title">
                <lang>服务资源配置</lang>
            </div>
            <resource-config-form-vgpu
                ref="defaultResource"
                use-page="project"
                :is-edit="isEdit"
                :default-width="defaultWidth"
                :allow-decimals="false"
                :label-name="_('资源分配')"
                :resource-nums="resourceNums"
                :submit-data="submitData"
                :initial-vgpu="initialVgpu"
                :initial-vgpu-memory="initialVgpuMemory">
                <template slot="cpu_content">
                    <div class="m-b10 gray">
                        <lang>
                            指定您的服务器需使用的CPU核心个数。（eg：4）
                        </lang>
                    </div>
                </template>
                <template slot="gpu_content">
                    <div class="m-b10 gray">
                        <lang>
                            指定该工作空间需使用的GPU类型和数量，资源不能超过用户配额最大值。
                        </lang>
                    </div>
                </template>
                <template slot="memorySize_content">
                    <div class="m-b10 gray">
                        <lang>
                            指定该工作空需的内存大小，目前仅支持整数分配。（eg：8）
                        </lang>
                    </div>
                </template>
                <div class="resource-form__option-content">
                    <div class="m-b10 gray">
                        <lang>配置您的服务器所挂载的工作空间</lang>
                    </div>
                    <div v-if="isEdit">
                        <div class="workspace-content">
                            存储名称：{{ submitData.volumeName }}
                        </div>
                    </div>
                    <div v-else>
                        <div class="flex-center m-b10">
                            <div class="w-75">
                                <lang>配置方式：</lang>
                            </div>
                            <sf-radio-group v-model="newVolume" @change="radioChange">
                                <sf-radio name="newVolume"
                                          :check-value="true">
                                    新建
                                </sf-radio>
                                <sf-radio name="newVolume"
                                          :check-value="false">
                                    已有存储
                                </sf-radio>
                            </sf-radio-group>
                        </div>
                        <div v-if="newVolume">
                            <sf-form-item class="flex-center m-t10">
                                <sf-fieldlabel class="workspace">
                                    <lang>存储名称</lang>
                                </sf-fieldlabel>
                                <sf-textfield
                                    ref="fieldName"
                                    v-model="submitData.volumeName"
                                    :default-width="defaultWidth"
                                    :max-length="30"
                                    :allow-blank="false"
                                    :utf8-length="false"
                                    :validator="_nameValidator"
                                    :blur-trim="true"
                                    :placeholder="_('请输入存储名称')" />
                            </sf-form-item>
                            <div class="option-content__option-input">
                                <i class="iconfont iconneicun"></i>
                                <lang>工作存储空间</lang>
                                <sf-numberfield
                                    v-model="submitData.workspace"
                                    :min-value="0"
                                    :allow-decimals="false"
                                    :default-width="60" />
                                <lang>GB</lang>
                            </div>
                            <div class="option-content__option-slider">
                                <div class="option-slider__text">
                                    <div>0GB</div>
                                    <div>(MIN)</div>
                                </div>
                                <el-slider
                                    v-model="submitData.workspace"
                                    class="option-slider__sxf-slider"
                                    tooltip-class="sxf-slider__tooltip"
                                    :min="0"
                                    :max="resourceNums.workspace" />
                                <div class="option-slider__text">
                                    <div>{{ resourceNums.workspace }}GB</div>
                                    <div>(MAX)</div>
                                </div>
                            </div>
                        </div>
                        <sf-form-item v-else
                                      class="flex-center m-t10">
                            <sf-fieldlabel class="workspace">
                                <lang>存储选择</lang>
                            </sf-fieldlabel>
                            <sf-select
                                v-model="submitData.volumeName"
                                display-field="name"
                                value-field="name"
                                :placeholder="_('请选择')"
                                :default-width="defaultWidth"
                                :options="pvcList" />
                        </sf-form-item>
                    </div>
                </div>
            </resource-config-form-vgpu>
        </div>
        <div class="bell  m-t15">
            <i class="sf-comp-iconfont icon-comp-bell"></i>
            <lang>提示：超过3天不访问将会自动停止。</lang>
        </div>
    </sf-form>
</template>
<script>

import resourceConfigFormVgpu from 'src/home/mod_cluster/common/common_form/resource_config_form_vgpu';
const FIELD_WIDTH = 400;


import selectImageForm from 'src/home/mod_cluster/common/common_form/select_image_form';


export default {
    data () {
        return {
            initialVgpu: 0, // 改数据原分配
            initialVgpuMemory: 0, // 改数据原显存
            submitData: {
                name: '',
                cpu_limit: '',
                gpu_limit: 0,
                root: false,
                cpuNum: 3,
                memorySize:4,
                vGpuMemory: 0,
                newVolume:true,
                workspace: 1,
                volumeName: '',
                description: '',
                image: '',
                vGpuDisplayName: '',
                vGpuNum: 0
            },
            isEdit: false,
            newVolume: true,
            resourceNums: {
                cpu: 256,
                memory: 256,
                gpu: 256,
                workspace: 10000
            },
            pvcList: []
        };

    },
    components: {
        resourceConfigFormVgpu,
        selectImageForm
    },
    computed: {
        defaultWidth () {
            return FIELD_WIDTH;
        },
        userId () {
            return this.$store.state.userId;
        }
    },
    methods: {
        radioChange(){
          this.submitData.volumeName = '';
        },
        _nameValidator (value) {
            let datasetNameReg = /^[a-z]([-a-z0-9]*[a-z0-9])?$/;
            if (!datasetNameReg.test(value)) {
                return _('必须以小写字母开头，而且仅支持横线、数字及小写字母');
            }
            return true;
        },

        getJsonValue () {
            this.submitData.userID = this.userId;
            this.submitData.image = this.$refs.defaultImage.getJsonValue().image;
            this.submitData.imageName = this.$refs.defaultImage.getJsonValue().imageName;
            this.submitData.newVolume = this.newVolume;
            Object.assign(this.submitData, this.$refs.defaultResource.getJsonValue());

            if (this.submitData.vGpuNum === 0) {
                this.submitData.vGpuDisplayName = '';
            }
            return this.submitData;
        },
        setJsonValue (data) {
            Object.assign(this.submitData, data);
            this.$refs.defaultImage && this.$refs.defaultImage.setJsonValue(data);
        },
        reset () {
            this.$refs.defaultImage && this.$refs.defaultImage.reset();
        }

    }
};
</script>

<style lang="less">
.add-server__form {
    padding: 10px 32px;
    height: 550px;
    .workspace {
        margin-top: 0;
        padding-left: 0;
    }
    .form__title {
        margin-bottom: 10px;
        margin-left: -8px;
        color: #14161a;
        font-weight: bold;
    }
    .flex {
        display: flex;
    }
    .gray {
        color: #adadad;
    }
    .bell {
        .icon-comp-bell {
            color: #ad6800;
        }
    }
    .w-75 {
        width: 75px;
    }
    .workspace-content {
        margin: 8px 0;
    }
    .resource-config__container {
        margin-left: 4px;
        /* width: 336px; */
        .resource-form__option-content {
            border: 1px solid #dddddd;
            border-radius: 2px;
            padding: 10px 20px;
            margin-bottom: 10px;
            margin-top: 0;
            background: #fff;
            .option-content__option-input {
                line-height: 32px;
            }

            .option-content__option-slider {
                display: flex;
                margin-top: 10px;
            }
            .option-slider__sxf-slider {
                flex: 1;
                padding: 0 10px;
            }
            .option-slider__text {
                text-align: center;
                color: #adadad;
            }
            // 饿了么组件样式修改
            .el-slider__bar {
                background-color: #1db83f;
            }
            .el-slider__button {
                background-color: #1db83f;
                border-color: #78e28f;
            }
            .el-slider__button-wrapper {
                z-index: 50;
            }
        }
        .sxf-slider__tooltip {
            background-color: transparent !important;
            color: #1db83f !important;
            padding: 0 !important;
            .popper__arrow {
                display: none;
            }
        }
    }
}
</style>


